<template>
	<view class="swiper-grid">
		<view class="swiper">
			<uv-swiper :list="list" indicator indicatorMode="line" circular height="300rpx" radius="16rpx"
				@click="handChange"></uv-swiper>
		</view>
		<view class="grid">
			<view class="grid-item" @click="handZu">
				<image class="bg" src="/static/home/grid-1.png" mode=""></image>
				<view class="grid-item-info">
					<view class="title">我要租车</view>
					<view class="desc">租车有保障</view>
					<image class="more" src="/static/home/more.png" mode=""></image>
				</view>
			</view>
			<view class="grid-item" @click="handChu">
				<image class="bg" src="/static/home/grid-2.png" mode=""></image>
				<view class="grid-item-info">
					<view class="title">有车出租</view>
					<view class="desc">闲置车出租有收益</view>
					<image class="more" src="/static/home/more.png" mode=""></image>
				</view>
			</view>
		</view>
		<car-auth ref="carRef" />
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		useAppsStore
	} from '@/stores/modules/app.js'
	import CarAuth from '@/components/CarAuth.vue'
	import {
		storeToRefs
	} from 'pinia'

	const useStore = useAppsStore()
	const {
		getUserInfo: userInfo
	} = storeToRefs(useStore)

	const list = ref([])
	const carRef = ref()
	import {
		doBannerList
	} from '@/apis/home.js'

	const handZu = () => {
		uni.switchTab({
			url: '/pages/tabbar/hire/index'
		})
	}

	const handChange = (e) => {
		const info = list.value[e]
		if (info.bannerType === 'DYNAMIC') {
			uni.navigateTo({
				url: `/pagesA/car/detail?id=${info.productId}`
			})
		} else if (info.bannerType === 'LINK') {
			uni.navigateTo({
				url: '/pagesA/other/web',
				success: (res) => {
					res.eventChannel.emit('acceptDataFromOpenerPage', info)
				}
			})
		}
	}

	const handChu = async () => {
		await handUser()
		if (userInfo.value?.merchant?.status === 'AUDIT') {
			uni.$uv.toast('审核中,请耐心等待')
			return
		}
		if (userInfo.value.userType === 'COMMON') {
			carRef.value.handOpen()
			return
		}
		handJump('/pagesA/dealers/home')
	}

	const handUser = () => {
		return new Promise((rel, rej) => {
			if (userInfo.value?.id) {
				return rel(true)
			}
			handJump('/pagesA/login/login')
			rej('请先登录')
		})
	}

	const handJump = (url) => {
		uni.navigateTo({
			url
		})
	}

	const getBanner = async () => {
		const data = await doBannerList()
		list.value = data.map(el => {
			el.image = el.url
			return el
		})
	}
	getBanner()

	defineExpose({
		getBanner,
	})
</script>

<style lang="scss" scoped>
	.swiper-grid {
		padding: 0 24rpx 24rpx;

		.grid {
			margin-top: 32rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&-item {
				width: 338rpx;
				height: 182rpx;
				position: relative;

				.bg {
					position: absolute;
					top: 0;
					left: 0;
					width: 338rpx;
					height: 182rpx;
				}

				&-info {
					position: relative;
					z-index: 3;
					padding: 22rpx 24rpx;

					.title {
						font-size: 36rpx;
						font-family: PingFang SC-Bold, PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}

					.desc {
						margin-top: 8rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
					}

					.more {
						margin-top: 14rpx;
						width: 30rpx;
						height: 30rpx;
					}
				}
			}
		}
	}
</style>